import { udp, useAsyncEffect } from '@cscec/udp-mobile-ui';
import { detail, getExerciseList, queryDetail } from './service';
import PairingGame from '@/components/pairingGame';
import { useState } from 'react';
import ImageWordSelection from '@/components/imageWordPairing';
import WordImagePairing from '@/components/WordImagePairing';
import Recording from '@/components/Recording';
import BellaHeader from '@/components/header';
import SpellingGame from '@/components/SpellingGame';
import ListeningExercise from '@/components/ListeningExercise';
//import { Button } from 'antd-mobile/es/components/button/button';
const PageList: React.FC = () => {
  const { unit, topic, title } = udp.getQueryValue()
  const [type, setType] = useState(8)
  const [value, setValue] = useState<any>({})
  const [exeList, setExeList] = useState<any>([])
  const [articleType, setArticleType] = useState<any>(0)
  const [num, setNum] = useState(1)
  useAsyncEffect(async () => {
    const res = await getExerciseList({
      pageIndex: 1, pageSize: 999,
      unit_id: unit,
      topic_id: topic
    })
    setExeList(res.record)
    if (res.record.length > 0) {
      const article = res.record[0].articleType
      setArticleType(article)
      if (article == 1) {
        const reslut = await queryDetail({ id: res.record[0].id, articleType: article })
        setValue(reslut)
        setType(reslut.type)
      } else {
        const reslut = await detail({ id: res.record[0].id, articleType: article })
        setValue(reslut)
        setType(reslut.type)
      }
    } else {
      udp.alert('当前主题未配置学习内容').then((res) => {
        udp.close()
      })
    }

  }, [unit])

  useAsyncEffect(async () => {
    if (exeList[num - 1]) {
      const article = exeList[num - 1].articleType
      setArticleType(article)
      if (article == 1) {
        const reslut = await queryDetail({ id: exeList[num - 1].id, articleType: article })
        setValue(reslut)
        setType(reslut.type)
      } else {
        const reslut = await detail({ id: exeList[num - 1].id, articleType: article })
        setValue(reslut)
        setType(reslut.type)
      }
    }
  }, [num, exeList])


  const renderContent = () => {
    switch (type) {
      case 0: return <PairingGame values={value} num={num} length={exeList.length} setNum={setNum} />;//单词消消乐
      case 1: return <ImageWordSelection values={value} num={num} length={exeList.length} setNum={setNum} wordList={exeList}/>;//看图选单词
      case 2: return <WordImagePairing values={value} num={num} length={exeList.length} setNum={setNum} wordList={exeList} />;//听音选图片
      case 4: return <ListeningExercise values={value} num={num} length={exeList.length} setNum={setNum} wordList={exeList} />;//读单词
      case 7: return <SpellingGame values={value} num={num} length={exeList.length} setNum={setNum} wordList={exeList} />;//看图拼写单词
      default: return <></>;
    }
  }

  return (
    <div className="page-outer" style={{
      height:"100%"
    }} >
      <BellaHeader title={title} onMain={() => { udp.open('/BellaEnglish') }} />
       {renderContent()}
      <div style={{ height: '80px' }}></div>
    </div>
  );
};
export default PageList;
